<template>
  <div class="login">
    <div class="login-container">
      <h3 class="mb-40 mt-20">用户登录</h3>
      <input class="login-input" placeholder="请输入用户名" v-model="account" type="text" required :readonly="readonlyData"
        @focus="readonlyData = false" />
      <input class="login-input" placeholder="请输入密码" v-model="password" :type="isShowPass" required
        :readonly="readonlyData" @focus="readonlyData = false" />
      <!-- <img src="../public/images/close.png" v-if="isShowPass == 'password'" class="login-input-icon"
        @click="changeType()" />
      <img src="../public/images/open.png" v-else class="login-input-icon" @click="changeType()" /> -->
      <div class="login-remember">
        <input type="checkbox" class="login-remember-checkbox" />
        <span class="login-remember-text">同意协议 <span @click="" class="link-agreement pointer">查看具体协议</span></span>
      </div>
      <button @click="loginBtn" class="login-btn">登录</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { login,getUserInfo } from '../apis/api/login'
import type { LoginRequest } from '../apis/types/login.d'
import {message} from 'ant-design-vue'
const account = ref("");
const password = ref("");
const readonlyData = ref(true);
const isShowPass = ref("password");
const router = useRouter();

// const changeType = () => {
//   const copyPass = password.value;
//   console.log(copyPass, "复制的密码");

//   if (isShowPass.value == "password") {
//     isShowPass.value = "text";
//   } else {
//     isShowPass.value = "password";
//   }
//   password.value = copyPass;
// };

const loginBtn = async () => {
  const params: LoginRequest = {
    phone: account.value,
    password: password.value
  }
  await login(params).then((res: any) => {
    console.log(res, "登录结果");
    if(res.data.code == 200){
      message.success('登录成功！')
      sessionStorage.setItem('token', res.data.data)
      router.push("/")
    }else{
      message.error(res.data.msg)
    }
  })
  .catch((err: any) => {
    message.error(err.message)
  })
  await getUserInfo().then((res: any) => {
    console.log(res.data, "用户信息");
    if(res.data.code == 200){
      sessionStorage.setItem('userInfo', JSON.stringify(res.data.data))
    }else{
      message.error(res.data.msg)
    }
  })

  
};
</script>

<style scoped lang="scss">
.login {
  height: calc(100vh - 16px);
  width: calc(100vw - 10px);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("https://img.js.design/assets/img/6331181ae1b5759e66a0e363.png");
  background-size: 100% 100%;

  .login-container {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    position: relative;
    width: 550px;
    height: 320px;
    min-width: 500px;
    min-height: 320px;
    background: rgba(19, 59, 123, 0.5);
    backdrop-filter: blur(2px);
    border: 2px solid #5380ed;
    clip-path: polygon(0 0,
        100% 0,
        100% calc(100% - 20px),
        calc(100% - 20px) 100%,
        0 100%);

    &::after {
      content: "";
      position: absolute;
      right: -7.8px;
      bottom: -17px;
      width: 20px;
      height: 40px;
      border-right: 2px solid #5380ed;
      transform: rotate(225deg);
      // border-bottom: 2px solid #5380ED;
      z-index: 10;
    }

    .login-input:nth-of-type(1) {
      background: transparent url(../public/images/user.png) 4px no-repeat;
      background-size: 18px 18px;
    }

    .login-input:nth-of-type(2) {
      background: transparent url(../public/images/lock.png) 4px no-repeat;
      background-size: 17px 17px;
    }

    .login-input {
      border: 1px solid rgba(83, 128, 237, 0.5);
      background-color: transparent;
      color: #fff;
      margin-bottom: 20px;
      width: 280px;
      height: 35px;
      padding: 2px 5px;
      padding-left: 30px;
    }

    .login-input:focus {
      outline: 1px solid #5380ed;
      background-color: transparent;
    }

    input:-internal-autofill-previewed,
    input:-internal-autofill-selected {
      -webkit-text-fill-color: #ffffff !important;
      transition: background-color 5000s ease-in-out 0s !important;
    }

    .login-input-icon {
      position: absolute;
      right: 125px;
      top: 155px;
      width: 18px;
      height: 18px;
    }

    .login-input-icon:hover {
      cursor: pointer;
    }

    .login-remember {
      position: absolute;
      top: 210px;
      left: 134px;
      display: flex;

      .login-remember-checkbox {
        -webkit-appearance: none;
        margin-right: 5px;
        position: relative;
        width: 12px;
        height: 12px;
        border: 1px solid rgba(83, 128, 237, 0.5);
        background-color: transparent;
        border-radius: 2px;
      }

      .login-remember-checkbox:checked {
        background-color: #5380ed;
      }

      .login-remember-checkbox:checked::after {
        content: "";
        position: absolute;
        display: block;
        bottom: 2px;
        left: 3.5px;
        width: 2.5px;
        height: 6px;
        border-right: 2.3px solid #fff;
        border-bottom: 2.3px solid #fff;
        transform: rotate(38deg);
      }

      .login-remember-text {
        color: #dbd8d8;
        font-size: 12px;

        .link-agreement {
          color: #479ffe;
        }
      }
    }

    .login-btn {
      color: #fff;
      margin-top: 30px;
      width: 300px;
      height: 40px;
      line-height: 40px;
      background: #479ffe;
      border: 1px solid #479ffe;
      border-radius: 5px;
    }
  }
}

input::placeholder {
  color: #dbd8d8;
  font-size: 12px;
}
</style>